<template>
<a-descriptions bordered>
    <a-descriptions-item label="名称">{{ this.product.pname }}</a-descriptions-item>
    <a-descriptions-item label="类型">
        <a-tag :key="this.product.type" :color=" 'cyan' ">
            {{ this.product.type }}
        </a-tag>
    </a-descriptions-item>
    <a-descriptions-item label="产地">{{ this.product.source }}</a-descriptions-item>
    <a-descriptions-item label="生产日期" :span="2">{{ this.product.createTime }}</a-descriptions-item>
    <a-descriptions-item label="批号">{{ this.product.lot }}</a-descriptions-item>
    <a-descriptions-item label="过期时间" :span="2">{{ this.product.exp }}</a-descriptions-item>
    <a-descriptions-item label="当前位置" :span="3">
        <a-badge status="processing" :text="this.product.address" />
    </a-descriptions-item>
    <!-- <a-descriptions-item label="检测结果">{{ this.product.puid }}</a-descriptions-item> -->
</a-descriptions>

<a-timeline mode="alternate" pending="记录中..." :reverse="true" style="margin-top: 50px;">
    <a-timeline-item class="line-item" v-for="line in this.history" :key="line.puid">
        <p>{{ line.mark }}</p>
        <a-tag :key="line.isPass" :color="line.isPass=='1'? 'green' :'red'">
            {{ line.isPass == "1" ? "合格" : "不合格" }}
        </a-tag>
        <a-tag :key="line.arrived" :color="line.arrived=='1' ? 'blue' :'red'">
            {{ line.arrived == "1" ? "已到达" : "未到达" }}
        </a-tag>
    </a-timeline-item>
</a-timeline>
</template>

<script>
import {
    defineComponent,
    ref,
} from 'vue';
import API from '@/config/axiosInstance'
export default defineComponent({
    props: ['params'],
    setup() {
        const product = ref({})

        const history = ref([{}])

        return {
            product,
            history
        }
    },
    created() {
        console.log(this.$route.params.puid)
        this.getData(this.$route.params.puid)
        this.getListById(this.$route.params.puid)
    },
    methods: {
        getData(puid) {
            API({
                method: 'get',
                url: 'product/getById',
                params: {
                    'puid': puid
                }
            }).then(res => {
                this.product = res.data.info
                console.log(this.product)
            })
        },
        getListById(puid) {
            API({
                method: 'get',
                url: 'history/getListById',
                params: {
                    'puid': puid
                }
            }).then(res => {
                //this.product = res.data.info
                console.log(res.data.info)
                this.history = res.data.info
            })
        }
    }
})
</script>

<style>
</style>
